<!-- 名片详情 -->
<template>
	<view class="card-details">
		<view class="card-details-item">
			<image :src="dataForm.headimgurl" class="user-logo"></image>
			<view class="title">
				<text class="user-name">{{dataForm.name}}</text>
				<view class="user-occupation">{{dataForm.duties}}</view>
				<view class="title-line"></view>
				<view class="user-detail">
					<view class="user-detail-item-one">
						<image src="../static/phone.png" mode="" class="user-detail-item-img"></image>
						<text>{{dataForm.phone}}</text>
					</view>
					<view class="user-detail-item">	
						<image src="../static/comname.png" mode="" class="user-detail-item-img"></image>
						<text>{{dataForm.company}}</text>
					</view>
					<view class="user-detail-item">
						<image src="../static/letter.png" mode="" class="user-detail-item-img"></image>
						<text>{{dataForm.email}}</text>
					</view>
					<view class="user-detail-item">
						<image src="../static/address.jpg" mode="" class="user-detail-item-img"></image>
						<text>{{dataForm.address}}</text>
					</view>
				</view>
			</view>
		</view>

		<view class="function-key">
			<view class="function-key-item">
				<image src="../static/gz.png" class="function-key-img"></image>
				<view class="">关注</view>
			</view>
			<view class="function-key-item" @click="collection">
				<image src="../static/sc.png" class="function-key-img"></image>
				<view class="">{{dataForm.is_follow == 1?'已收藏':'收藏'}}</view>
			</view>
			<view class="function-key-item"  @click="onShare">
				<image src="../static/fx.png" class="function-key-img"></image>
				<view class="">发名片</view>
				<!-- <button class="share-btn" type="default" open-type='share'></button> -->
			</view>
		</view>
		<view class="scroll-view">
			<view class="setUp-item" v-for="(item,index) in list" :key='index'
				@click="onCopyContent(dataForm[item.value])">
				<view class="setUp-i">
					<view class="flex-c-c">
						<image :src="item.icon" class="setUp-item-img"></image>
						<view class="">{{item.name}}</view>
					</view>
					<view class="setUp-item-tel">
						{{dataForm[item.value]}}
					</view>
				</view>
			</view>

		</view>
		<view class="card-details-b">
			<view class=" company-profile" v-if="dataForm.introduce">
				<view class="personal-pdlr30">
					<view class="company-profile-title personal-video-and-company">
						公司介绍
					</view>
					<view class="" style="width: 100%;min-height: 200rpx;word-wrap:break-word">
						<rich-text selectable :nodes="dataForm.introduce"></rich-text>
					</view>
				</view>
			</view>
			<view class="video" v-if="dataForm.video">
				<view class="personal-pdlr30">
					<view class="video-title personal-video-and-company">
						视频
					</view>
					<view class="video-v">
						<video id="myVideo" :src="dataForm.video" :danmu-btn='false' enable-play-gesture controls
							object-fit='contain'></video>
					</view>
				</view>
			</view>
			<view class="d-image" v-if="dataForm.imgList">
				<view class="personal-pdlr30">
					<view class="video-title personal-video-and-company">
						图片
					</view>
					<image :src="el" mode="widthFix" class="del-image" @click="onPreImg(index)"  v-for="(el,index) in dataForm.imgList"
						:key='index'></image>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import cardMixin from '../mixins/index.js'
	export default {
		props: {
			data: {
				type: Object,
				default: () => {
					return {}
				}
			}
		},
		mixins: [cardMixin],
		data() {
			return {
				list: [{
						icon: require('../static/phone-filt.png'),
						name: '电话',
						value: 'phone'
					},
					{
						icon: require('../static/qq.png'),
						name: 'QQ',
						value: 'qq'
					},
					{
						icon: require('../static/wx.png'),
						name: '微信',
						value: 'weixin'

					},
					{
						icon: require('../static/comname.png'),
						name: '公司名称',
						value: 'company'

					},
					{
						icon: require('../static/letter.png'),
						name: 'email',
						value: 'email'

					},
					{
						icon: require('../static/address.jpg'),
						name: '公司地址',
						value: 'address'
					},
				],
				list1: [{
						icon: '',
						name: '关注'
					},
					{
						icon: '',
						name: '收藏'
					},
					{
						icon: '',
						name: '分享'
					},
				]
			};
		},

	}
</script>

<style lang="scss" scoped>
	.card-details {
		position: relative;
		padding-top: 1rpx;
		width: 100%;
		min-height: 300rpx;
		background-size: 100%;
		background-repeat: no-repeat;
		background-image: url('');
	}

	.card-details-item {
		width: 690rpx;
		padding: 0 30rpx;
		// height: 350rpx;
		background: #FFFFFF;
		box-shadow: 0px 0rpx 16rpx 0rpx rgba(21, 126, 255, 0.45);
		border-radius: 16rpx;
		margin: 30rpx auto 0;
	}

	.mt-30 {
		margin-top: 30rpx;
	}


	.del-image {
		display: flex;
		flex-direction: column;
		width: 100%;
		margin-bottom: 20rpx;
	}



	.d-image {
		border-top: 10rpx solid #f5f5f5;
	}

	#myVideo {
		width: 100%;
		height: 100%;
	}

	video {
		width: 100%;
		height: 100%;
	}

	.personal-pdlr30 {
		padding: 0 30rpx;
		border-bottom: 10rpx solid #f5f5f5;
	}

	.company-profile {
		background-color: #ffffff;
	}

	.video .personal-pdlr30 {
		border-bottom: 0;
	}

	.personal-video-and-company {
		width: 100%;
		height: 85rpx;
		line-height: 85rpx;
		font-size: 30rpx;
	}


	.video-v {
		width: 100%;
		height: 388rpx;
		border-radius: 10rpx;
		background: #f4f4f4;
	}




	.follow {
		position: relative;
		flex: 1;
		flex-direction: column;
		justify-content: center;
		height: 130rpx;
	}


	.follow-title {
		font-size: 24rpx;
	}

	.flex {
		display: flex;
	}

	.flex-c-sb {
		display: flex;
		align-items: center;
		justify-content: space-between;
	}

	.flex-c-c {
		display: flex;
		align-items: center;
		justify-content: center;
	}


	.card-details-item {
		position: relative;
		padding: 40rpx 40rpx 0;

		.user-logo {
			position: absolute;
			width: 150rpx;
			height: 150rpx;
			border-radius: 50%;
			right: 25rpx;
			top: 40rpx;
		}

		.title {
			position: relative;
			vertical-align: bottom;
			padding-bottom: 20rpx;

			.user-name {
				width: calc(100% - 180rpx);
				display: inline-block;
				font-size: 36rpx;
				font-weight: bold;
				color: #222222;
				margin-right: 20rpx;
				word-break: break-all;
				display: -webkit-box;
				-webkit-line-clamp: 2;
				-webkit-box-orient: vertical;
				overflow: hidden;
			}

			.user-occupation {
				margin-top: 5rpx;
				width: calc(100% - 180rpx);
				font-size: 26rpx;
				font-weight: 500;
				color: #222222;
				word-break: break-all;
				display: -webkit-box;
				-webkit-line-clamp: 2;
				-webkit-box-orient: vertical;
				overflow: hidden;
			}

			.title-line {
				width: 270rpx;
				height: 2rpx;
				background: #666666;
				border-radius: 1rpx;
				margin: 20rpx 0 40rpx;
			}

			.user-detail {
				.user-detail-item-one {
					margin-bottom: 15rpx;
					line-height: 29rpx;
					width: calc(100% - 150rpx);
					word-break: break-all;
				}
				.user-detail-item {
					margin-bottom: 15rpx;
					line-height: 29rpx;
					width: calc(100% - 60rpx);
					word-break: break-all;
				}
				.user-detail-item-img {
					display: inline-block;
					width: 29rpx;
					height: 29rpx;
					margin-right: 15rpx;
				}
			}
		}
	}

	.scroll-view {
		width: 100%;
		padding: 20rpx 0 20rpx 30rpx;
		overflow-x: scroll;
		white-space: nowrap;
	}

	.setUp-item {
		min-width: 276rpx;
		padding: 0 20rpx;
		height: 104rpx;
		background: #FFFFFF;
		border: 1px solid #999999;
		border-radius: 8rpx;
		margin-right: 20rpx;
		display: inline-block;

		.setUp-i {
			display: flex;
			align-items: center;
			justify-content: center;
			flex-direction: column;
			height: 100%;

			.setUp-item-img {
				width: 29rpx;
				height: 29rpx;
				margin-right: 10rpx;
			}
		}

		.setUp-item-tel {
			text-align: center;
			margin-top: 4rpx;
			font-size: 28rpx;
		}

	}


	.share-btn {
		width: 100%;
		height: 100%;
		position: absolute;
		top: 0;
		right: 0;
		opacity: 0;
	}

	/deep/ .scroll-view::-webkit-scrollbar {
		display: none;
		width: 0;
		height: 0;
	}


	.function-key {
		position: relative;
		display: flex;
		justify-content: space-between;
		padding: 50rpx 110rpx 30rpx;

		.function-key-item {
			display: flex;
			flex-direction: column;
			align-items: center;
			justify-content: center;
			position: relative;

			.function-key-img {
				width: 80rpx;
				height: 80rpx;
				border-radius: 50%;
				margin-bottom: 10rpx;
			}

			margin-top: 20rpx;
		}
	}
</style>
